<h1>资源管理列表 admin/asset-list</h1>
<div class='row'>
  <div class='col-3'>
    <a href='/admin/asset-create' type='button' class='btn btn-primary'>添加资源</a>
  </div>
</div>
<br/>
<table class='table'>
  <thead>
    <tr>
      <th scope='col'>资源名称</th>
      <th scope='col'>资源地址</th>
      <th scope='col'>资源类型</th>
      <th scope='col'>状态</th>
      <th scope='col'>排序</th>
      <th scope='col'>操作</th>
    </tr>
  </thead>
  <tbody id="assetTreeTable">
    {{#each assetTree}}
      {{> asset-node this depth=0}}
    {{/each}}
  </tbody>
</table>
<script>
  function deleteUser(userId) {
    if (!confirm("确定要删除吗？")) return;
    axios({
      method: 'DELETE',
      url: `/admin/api-asset/${userId}/delete`,
    }).then(({ data }) => {
      if (data.success) {
        const params = new URLSearchParams(window.location.search);
        let trs = document.querySelectorAll('.custom-tr');
        // 表示删除最后一个了
        if(trs.length === 1){
          const newPageNo = Number((params.get('pageNo') - 1))
          params.delete('pageNo');
          params.append('pageNo',String(Math.max(1, newPageNo)));
          window.location = window.location.pathname +'?'+ params.toString();
        }else{
          window.location.reload();
        }
      }
    })
  }
  window.onload = function () {
    let statusToggleEl = [...document.querySelectorAll('.status-toggle')];
    statusToggleEl.map((el) => {
      el.onclick = function () {
        const { id, status } = el.dataset;
        let newStatus = status === '1' ? '0' : '1';
        axios({
          method: "PUT",
          url: `/admin/api-asset/${id}/edit`,
          header: {
            accept: "application/json",
          },
          data: {
            status: Number(newStatus)
          }
        }).then(({ data }) => {
          if (data.success) {
            el.dataset.status = String(newStatus);
            let map = {
              '1': `<i class='bi bi-check-circle-fill text-success'></i>`,
              '0': `<i class='bi bi-x-circle-fill text-danger'></i>`
            }
            el.innerHTML = map[newStatus]
          }
        })
      }
    })

    // bootstrap- tooltips组件使用
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))


    let sortToggleEls = [...document.querySelectorAll('.sort-toggle')];
    sortToggleEls.map((el) => {
      el.ondblclick = function () {
        const {edit,id} = el.dataset;
        let newEdit = edit === '0' ? '1' : '0';
        if(newEdit === '1'){
          el.dataset.edit = newEdit;
          let inputEl = el.querySelector('.sort-input');
          let textEl = el.querySelector('.sort-text');
          inputEl.focus();
          inputEl.onblur = function(event){
            let newSort = event.target.value;
            axios({
              method: "PUT",
              url: `/admin/api-user/${id}/edit`,
              header: {
                accept: "application/json",
              },
              data: {
                sort: Number(newSort)
              }
            }).then(({ data })=>{
              if(data.success){
                textEl.innerText = newSort;
                el.dataset.edit = '0';
              }
            })
          }
        }
      }
    })

    // 表格折叠
    const tableChildrenToggle = [...document.querySelectorAll('#assetTreeTable .toggle.cursor-pointer')];
    const toggleChildrenEls = (newExtend,elChildrenEls) =>{
      elChildrenEls.forEach((son) => {
        if(newExtend === '0'){
          son.classList.add('hide')
        }else{
          son.classList.remove('hide')
        }
        let {id} = son.dataset;
        let elChildren = document.querySelectorAll(`.custom-tr[data-parent="${id}"]`);
        toggleChildrenEls(newExtend,elChildren);
      })
    }
    tableChildrenToggle.map((el) => {
      el.onclick = function () {
        const clickTr = el.parentElement.parentElement;
        const {childrenlen} = el.dataset;
        if(Number(childrenlen) < 1){
          return;
        }
        const {id, extend} = clickTr.dataset;
        const extendValue = {'0':'1','1':'0'};
        const extendIcon = {
          '1':`<i class="bi bi-folder-minus"></i>`,
          '0':`<i class="bi bi-folder-plus"></i>`
        }
        const newExtend = extendValue[extend];
        el.innerHTML = extendIcon[newExtend];
        clickTr.dataset.extend = newExtend;
        let elChildrenEls = document.querySelectorAll(`.custom-tr[data-parent="${id}"]`);
        toggleChildrenEls(newExtend, elChildrenEls);
      }
    })
  }
</script>

<style>
  .sort-toggle{
    cursor: pointer;
  }
  .sort-toggle[data-edit="0"] .sort-text,
  .sort-toggle[data-edit="1"] .sort-input {
    display: inherit;
  }
  .sort-toggle[data-edit="1"] .sort-text,
  .sort-toggle[data-edit="0"] .sort-input{
    display: none;
  }
  .page-item{
    cursor: pointer;
  }
  .hide{
    display: none;
  }
</style>